/**
 * 给料机 右边
 * @author lijj
 */

import React, { FC, useState } from "react";
import { MyObject } from "../..";
import { Input, message, Spin } from "antd";
import {
  getKshKqpControl,
  getKshPrepareStatus,
  getKshSet,
  IKshPrepareStatusParams,
} from "../../api";
import JiaozunZhunbei from "../JiaozunZhunbei";
import Jiaozun from "../Jiaozun";
import { IYckzZyLoadControlHetGlj } from "../../../RemoteControl/api";

const GljNd: FC<{
  wsData?: MyObject;
  liaocangId?: string; // 装车站ID
  handleCallBack: (bool: any, value: any, value2: any) => void;
  geiliaojiData?: IYckzZyLoadControlHetGlj
}> = ({ wsData, handleCallBack, liaocangId, geiliaojiData }) => {
  const [kgSwitch, setKgSwitch] = useState(true);
  const [count, setCount] = useState("");
  const [jiaozhunzhunbeiShow, setJiaozhunzhunbeiShow] = useState(false); // 校准准备弹窗
  const [jiaozhunShow, setJiaozhunShow] = useState(false); // 校准弹窗
  const [jiaozhunButtonLoading, setJiaozhunButtonLoading] = useState(false); // 校准按钮加载中
  const [shibiaodianji, setShibiaodianji] = useState(false); // 校准按钮加载中
  const handleClick = async (key: string, value: string | boolean) => {
    if (!liaocangId) {
      message.error("请先选择装车站");
      return;
    }
    console.log(value)
    if(typeof value === 'boolean' && value) {
      setShibiaodianji(true);
    }else if(typeof value === 'boolean' && !value) {
      console.log('点击了关闭按钮')
      setShibiaodianji(false);
    }

    const params = {
      id: liaocangId,
      key: key,
      value: value,
    };
    const { code, msg } = (await getKshSet(params)) as {
      code: number;
      msg: string;
    };
    if (code === 20000) {
      message.success(msg);
    } else {
      message.error(msg);
    }
  };
  // 空气炮点击事件
  const handleKongqipaoClick = async (key: string, show: boolean) => {
    if (liaocangId) {
      if (show) {
        setShibiaodianji(true);
      } else {
        setShibiaodianji(false);
      }
      const params = {
        id: liaocangId,
        number: key,
        status: show ? "0" : "1", // 状态 0:开启 1:关闭
      };
      const { code, msg } = (await getKshKqpControl(params)) as {
        code: number;
        msg: string;
      };
      if (code === 20000) {
        if (show) {

          message.success("空气炮开启成功");
        } else {
          message.success("空气炮关闭成功");
        }
      } else {
        message.error(msg);
      }
    }
  };
  // const handleJiaozunClick = async (key: string) => {
  //   const params = {
  //     id: liaocangId,
  //     number: key,
  //   };
  //   const { code, msg } = (await getKshCalibration(params)) as {
  //     code: number;
  //     msg: string;
  //   };
  //   if (code === 20000) {
  //     message.success("校准成功");
  //   } else {
  //     message.error(msg);
  //   }
  // };
  // 判断是否校准过了
  const handleJiaozunApi = async (num: 1 | 2) => {
    setJiaozhunButtonLoading(true);
    // 车道号
    const params: IKshPrepareStatusParams = {
      id: liaocangId as React.Key,
      number: num,
    };
    const { code, msg, data } = (await getKshPrepareStatus(params)) as {
      code: number;
      msg: string;
      data: boolean;
    };
    if (code === 20000) {
      if (data) {
        setJiaozhunShow(true);
        setJiaozhunzhunbeiShow(false);
      } else {
        setJiaozhunzhunbeiShow(true);
        setJiaozhunShow(false);
      }
    } else {
      message.error(msg);
    }
    setJiaozhunButtonLoading(false);
  };
  return (
    <div className="neirong_right">
      <div className="glj-title">
        <div className="glj-title-left">
          南空气炮:
          <div
            className="btn"
            onMouseDown={() => handleKongqipaoClick("2#", true)}
            onMouseUp={() => handleKongqipaoClick("2#", false)}
            onMouseOut={() => {
              if (shibiaodianji) {
                handleKongqipaoClick("2#", false)
              }

            }}
          >
            开启
          </div>
        </div>
        {geiliaojiData && <>{geiliaojiData.glj2}~ {geiliaojiData.glj2Num}</>}
      </div>
      {/* 给料机运行容器 */}
      <div className="right-glj">
        <div className="title titleFlex">
          <div style={{ display: "flex" }}>
            给料机运行
            {/* <div className="btn" onMouseDown={() => handleJiaozunClick("1#")}>
              校准
            </div> */}
          </div>
          {/* <div className="frequency">
            <span style={{ color: "#8297B2", marginRight: ".8rem" }}>
              频率:
            </span>
            <span>{wsData && wsData["s45"] ? wsData["s45"] : 0}Hz</span>
          </div> */}
        </div>
        <div className="xinhao_box">
          <div>
            <span
              className={`xinhao ${wsData && wsData["s17"] ? "bg-green" : "bg-gray"
                }`}
            ></span>
            <span
              className={`${wsData && wsData["s17"] ? "text-green" : "text-gray"
                }`}
            >
              远程
            </span>
          </div>
          <div>
            <span
              className={`xinhao ${wsData && wsData["s18"] ? "bg-green" : "bg-gray"
                }`}
            ></span>
            <span
              className={`${wsData && wsData["s18"] ? "text-green" : "text-gray"
                }`}
            >
              自动
            </span>
          </div>
          <div>
            <span
              className={`xinhao ${wsData && wsData["s19"] ? "bg-green" : "bg-gray"
                }`}
            ></span>
            <span
              className={`${wsData && wsData["s19"] ? "text-green" : "text-gray"
                }`}
            >
              运行
            </span>
          </div>
          <div>
            <span
              className={`xinhao ${wsData && wsData["s20"] ? "bg-red" : "bg-gray"
                }`}
            ></span>
            <span
              className={`${wsData && wsData["s20"] ? "text-red" : "text-gray"
                }`}
            >
              故障
            </span>
          </div>
          <div>
            <span
              className={`xinhao ${wsData && wsData["s21"] ? "bg-green" : "bg-gray"
                }`}
            ></span>
            <span
              className={`${wsData && wsData["s21"] ? "text-green" : "text-gray"
                }`}
            >
              电源
            </span>
          </div>
        </div>
        <div className="btn-box">
          <div
            className="btn"
            onMouseDown={() => handleClick("b11", true)}
            onMouseUp={() => handleClick("b11", false)}
            onMouseOut={() => {
              console.log("shibiaodianji", shibiaodianji)
                if (shibiaodianji) {
                  handleClick("b11", false)
                }
              

            }}
          >
            启动
          </div>
          <div
            className="btn"
            onMouseDown={() => handleClick("b12", true)}
            onMouseUp={() => handleClick("b12", false)}
               onMouseOut={() => {
              if (shibiaodianji) {handleClick("b12", false)}

            }}
          >
            停止
          </div>
          {/* <div
            className="btn"
            onMouseDown={() => handleClick("b13", true)}
            onMouseUp={() => handleClick("b13", false)}
          >
            手动
          </div>
          <div
            className="btn"
            onMouseDown={() => handleClick("b14", true)}
            onMouseUp={() => handleClick("b14", false)}
          >
            自动
          </div> */}
        </div>
      </div>
      {/* 皮带秤信息容器 */}
      <div className="right-pd">
        <div className="title">皮带秤信息</div>
        <div
          className="full"
          onClick={() => {
            handleCallBack(
              true,
              wsData && wsData["s22"]
                ? (wsData["s22"] as unknown as number) / 1000
                : 0, // 如果 wsData 存在且 s06 不为 null，传递其值，否则传递 0
              wsData && wsData["s23"]
                ? (wsData["s23"] as unknown as number) / 1000
                : 0 // 同理处理 s07
            );
          }}
        >
          全屏
        </div>
        <div className="pd-xinxi">
          <div className="pd-xinxi-left">
            <div className="pd-img"></div>
            <div className="pd-content">
              <span className="pd-text">瞬时量</span>
              <span className="xiaozhun" onClick={() => handleJiaozunApi(2)}>
                校准
              </span>
              <div className="text-num">
                {wsData && wsData["s22"]
                  ? (wsData["s22"] as unknown as number) / 1000
                  : 0}
                <span
                  style={{
                    color: "#8B9EB3",
                    fontSize: "1.4rem",
                    marginLeft: ".8rem",
                  }}
                >
                  吨
                </span>
              </div>
            </div>
          </div>
          <div className="pd-xinxi-left">
            <div className="pd-img2"></div>
            <div className="pd-content">
              <span className="pd-text">累积量</span>
              <div className="text-num">
                {wsData && wsData["s23"]
                  ? (wsData["s23"] as unknown as number) / 1000
                  : 0}
                <span
                  style={{
                    color: "#8B9EB3",
                    fontSize: "1.4rem",
                    marginLeft: ".8rem",
                  }}
                >
                  吨
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      {/* 伸缩溜槽信息容器 */}
      <div className="right-ss">
        <div className="title">伸缩溜槽信息</div>
        <div className="ss-xinxi">
          <div className="ss-xinxi-left">
            <div className="xinhao_box">
              <div>
                <span
                  className={`xinhao ${wsData && wsData["s24"] ? "bg-green" : "bg-gray"
                    }`}
                ></span>
                <span
                  className={`${wsData && wsData["s24"] ? "text-green" : "text-gray"
                    }`}
                >
                  升到位
                </span>
              </div>
              <div>
                <span
                  className={`xinhao ${wsData && wsData["s25"] ? "bg-green" : "bg-gray"
                    }`}
                ></span>
                <span
                  className={`${wsData && wsData["s25"] ? "text-green" : "text-gray"
                    }`}
                >
                  降到位
                </span>
              </div>
            </div>
            <div className="btn-box">
              <div
                className="btn"
                onMouseDown={() => handleClick("b15", true)}
                onMouseUp={() => handleClick("b15", false)}
                   onMouseOut={() => {
                    if (shibiaodianji) {handleClick("b15", false)}
              

            }}
              >
                上升
              </div>
              <div
                className="btn"
                onMouseDown={() => handleClick("b16", true)}
                onMouseUp={() => handleClick("b16", false)}
                   onMouseOut={() => {
                    if (shibiaodianji) {handleClick("b16", false)}
              

            }}
              >
                下降
              </div>
            </div>
          </div>
          <div className="ss-xinxi-right">
            <div className="ss-text">
              {wsData && wsData["s26"] ? wsData["s26"] : 0}
              <span
                style={{
                  color: "#3089FF",
                  fontSize: "1.4rem",
                  marginLeft: ".3rem",
                }}
              >
                MM
              </span>
            </div>
            <div className="ss-bot">实时位置</div>
          </div>
        </div>
      </div>
      {/* 闸门运行 */}
      <div className="right-zm">
        <div className="left">
          <div className="title">闸门运行</div>
          <div className="zm-xinxi">
            <div className="xinhao_box">
              <div>
                <span
                  className={`xinhao ${wsData && wsData["s27"] ? "bg-green" : "bg-gray"
                    }`}
                ></span>
                <span
                  className={`${wsData && wsData["s27"] ? "text-green" : "text-gray"
                    }`}
                >
                  开到位
                </span>
              </div>
              <div>
                <span
                  className={`xinhao ${wsData && wsData["s28"] ? "bg-green" : "bg-gray"
                    }`}
                ></span>
                <span
                  className={`${wsData && wsData["s28"] ? "text-green" : "text-gray"
                    }`}
                >
                  关到位
                </span>
              </div>
              <div>
                <span
                  className={`xinhao ${wsData && wsData["s29"] ? "bg-green" : "bg-gray"
                    }`}
                ></span>
                <span
                  className={`${wsData && wsData["s29"] ? "text-green" : "text-gray"
                    }`}
                >
                  电源
                </span>
              </div>
            </div>
            <div className="btn-box">
              <div
                className="btn"
                onMouseDown={() => handleClick("b17", true)}
                onMouseUp={() => handleClick("b17", false)}
                   onMouseOut={() => {
                    if (shibiaodianji) {handleClick("b17", false)}
              

            }}
              >
                打开
              </div>
              <div
                className="btn"
                onMouseDown={() => handleClick("b18", true)}
                onMouseUp={() => handleClick("b18", false)}
                   onMouseOut={() => {
                    if (shibiaodianji) {handleClick("b18", false)}
              

            }}
              >
                关闭
              </div>
            </div>
          </div>
        </div>
        <div className="right">
          <div className="title">热风机运行</div>
          <div className="rfj-xinxi">
            <div className="xinhao_box">
              <div>
                <span
                  className={`xinhao ${wsData && wsData["s30"] ? "bg-green" : "bg-gray"
                    }`}
                ></span>
                <span
                  className={`${wsData && wsData["s30"] ? "text-green" : "text-gray"
                    }`}
                >
                  运行
                </span>
              </div>
              <div>
                <span
                  className={`xinhao ${wsData && wsData["s31"] ? "bg-red" : "bg-gray"
                    }`}
                ></span>
                <span
                  className={`${wsData && wsData["s31"] ? "text-red" : "text-gray"
                    }`}
                >
                  故障
                </span>
              </div>
              <div>
                <span
                  className={`xinhao ${wsData && wsData["s32"] ? "bg-green" : "bg-gray"
                    }`}
                ></span>
                <span
                  className={`${wsData && wsData["s32"] ? "text-green" : "text-gray"
                    }`}
                >
                  电源
                </span>
              </div>
            </div>
            <div className="btn-box">
              <div
                className="btn"
                onMouseDown={() => handleClick("b19", true)}
                onMouseUp={() => handleClick("b19", false)}
                onMouseOut={() => {
                    if (shibiaodianji) {handleClick("b19", false)}
              
              }}
              >
                启动
              </div>
              <div
                className="btn"
                onMouseDown={() => handleClick("b20", true)}
                onMouseUp={() => handleClick("b20", false)}
                onMouseOut={() => {
                    if (shibiaodianji) {handleClick("b20", false)}
              
              }}
              >
                停止
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="right-rfj">
        <div className="title">
          <div className="text-title">手动装车</div>
          <div className="switchBox">
            <div
              className={`dun ${kgSwitch ? "active" : "unactive"}`}
              onClick={() => setKgSwitch(!kgSwitch)}
            >
              吨
            </div>
            <div
              className={`dun ${kgSwitch ? "unactive" : "active"}`}
              onClick={() => setKgSwitch(!kgSwitch)}
            >
              千克
            </div>
          </div>
        </div>
        <div className="yyz-content">
          <div className="yyz-item-one">
            <div className="yyz-title">手动装载量</div>
            <div className="yyz-value">
              <span>
                {wsData && wsData["s47"]
                  ? kgSwitch
                    ? (Number(wsData["s47"]) / 1000).toFixed(2)
                    : wsData["s47"]
                  : 0}
              </span>
              <span style={{ fontSize: "1.4rem", marginLeft: ".3rem" }}>
                {kgSwitch ? "吨" : "千克"}
              </span>
            </div>
          </div>
          <div className="yyz-item">
            <div className="yyz-title">
              设置手动装载量{kgSwitch ? "(吨)" : "(千克)"}
            </div>
            <div className="inputBox">
              <Input
                className="inputLeft"
                placeholder="请输入数字"
                value={count}
                onChange={(e) => setCount(e.target.value)}
              />
              <div
                className="inputRight"
                //如果是吨的话 则需要乘1000
                onClick={() =>
                  handleClick(
                    "b32",
                    kgSwitch ? String(Number(count) * 1000) : count
                  )
                }
              >
                设定
              </div>
            </div>
          </div>
        </div>
      </div>
      {/* <ModuleJiaozun open={xiaozhunShow} id= {liaocangId} geiliaoji = {1} handleCallback={() => setXiaozhunShow(false)} /> */}
      <Jiaozun
        open={jiaozhunShow}
        id={liaocangId as React.Key}
        geiliaoji={2}
        handleCallback={() => setJiaozhunShow(false)}
      />
      <JiaozunZhunbei
        open={jiaozhunzhunbeiShow}
        id={liaocangId as React.Key}
        geiliaoji={2}
        handleCallback={() => {
          setJiaozhunzhunbeiShow(false)
          setJiaozhunShow(true)
        }}
      />
      <Spin spinning={jiaozhunButtonLoading} fullscreen />
    </div>
  );
};

export default GljNd;
